<template>
  <div class="box">
    <div class="title">
      热门景区排行
      <div class="title-bg"></div>
    </div>
    <div class="chart" ref="chartRef"></div>
  </div>
</template>

<script setup lang="ts" name="rank">
import * as echarts from 'echarts'
import { onMounted, ref } from 'vue'

const chartRef = ref()

onMounted(() => {
  initChart()
})

const initChart = () => {
  const chart = echarts.init(chartRef.value)

  chart.setOption({
    title: {
      text: '热门景区排行',
      textStyle: {
        color: 'white',
      },
      link: 'https://www.baidu.com',

      left: '50%',
      top: 10,
      subtext: '2023年1月1日 - 2023年12月31日',
      subtextStyle: {
        color: 'white',
      },
    },
    //x轴
    xAxis: {
      type: 'category',
      data: ['景区1', '景区2', '景区3', '景区4', '景区5', '景区6'],
      axisLabel: {
        color: 'white',
      },
    },
    //y轴
    yAxis: {},
    grid: {
      left: '10%',
      top: '20%',
    },
    tooltip: {},
    series: [
      {
        type: 'bar',
        data: [100, 200, 300, 400, 500, 600],
        itemStyle: {
          color: 'rgb(40,117,193)',
          borderRadius: [30, 30, 0, 0],
        },
        label: {
          show: true,
          position: 'top',
          color: 'white',
        },
        showBackground: true,
      },
      {
        type: 'line',
        data: [50, 200, 100, 300, 700, 200],
        itemStyle: {
          color: 'rgb(114,49,213)',
        },
        labelLine: {
          smooth: true,
        },
      },
    ],
  })
}
</script>

<style scoped lang="scss">
.box {
  height: 100%;
  background: url('../../images/dataScreen-main-lb.png') no-repeat;
  background-size: 100% 100%;
  margin-top: 20px;
  .title {
    color: white;
    font-size: 20px;
  }
  .title-bg {
    margin-top: 7px;
    display: block;
    background: url('../../images/dataScreen-title.png') no-repeat;
    background-size: cover;
    width: 68px;
    height: 7px;
  }
  .chart {
    height: 90%;
  }
}
</style>
